<template>
  <div id="totalLeftTop">
    <div class="d-flex jc-between" style="height: 100%; align-items: flex-start;">
      <div class="list_sty d-flex jc-center tltbox" v-for="(item, index) in caseList" :key="index">
        <div class="l-t-title">{{ item.label }}</div>
        <div class="l-t-value">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import { equipmentRunCount } from "@/api/ops/dashboard";

export default {
  data() {
    return {
      myChart: null,
      options: {},
      caseList: [
        { label: '签约总数', value: 8549 },
        { label: '服务站', value: 5698 },
        { label: '物联项目', value: 15689 },
      ],
    };
  },
  mounted() {
    this.init();
    this.equipmentRunCount();
  },
  methods: {
    init() {
      // let worldMapContainer1 = document.getElementById("distribution_pie");
      // this.myChart = new Charts(worldMapContainer1);
      // this.options = {
      //   color: ["#4F8BF9", "#FEA31E", "#D3D3D3"],
      //   series: [
      //     {
      //       type: "pie",
      //       radius: "65%",
      //       data: [
      //         { name: "运行", value: 2 },
      //         { name: "告警", value: 1 },
      //         { name: "离线", value: 0 },
      //       ],
      //       insideLabel: {
      //         show: true,
      //       },
      //       outsideLabel: {
      //         labelLineEndLength: 10,
      //       },
      //     },
      //   ],
      // };
      // this.myChart.setOption(this.options);
    },
    equipmentRunCount() {
      // let $this = this;
      // equipmentRunCount().then((response) => {
      //   if (response.code == 0 && response.data != null) {
      //     $this.options.series[0].data = [
      //       { name: "运行", value: response.data["runCount"] },
      //       {
      //         name: "告警",
      //         value: response.data["alarmCount"],
      //       },
      //     ];
      //     $this.myChart.setOption(this.options);
      //   }
      // });
    },
  },
};
</script>

<style lang="scss">
#totalLeftTop {
  height: 100%;

  .tltbox {
    background-image: url("~@/assets/background/btbg.svg");
    width: 100%;
    background-size: cover;
    flex-direction: column;
    align-items: center;
    width: 32%;
    height: 100%;
    justify-content: flex-start;

    .l-t-title {
      // background-image: url("~@/assets/background/btbg.svg");
      width: 100%;
      // background-size: cover;
      height: 0.4608rem;
      line-height: 0.4608rem;
      text-align: center;
      color: #fff;
    }

    .l-t-value {
      // background-image: url("~@/assets/background/content.svg");
      width: 100%;
      // background-size: cover;
      flex: 1;
      justify-content: center;
      display: flex;
      align-items: center;
      font-size: 0.4rem;
      color: #fff;
    }
  }
}
</style>
